<template>
	<div>
		<el-form ref="queryform" size="small" :inline="true" :model="queryform">
			<el-form-item label="审批流程名称" prop="processName">
				<el-input v-model="queryform.processName"></el-input>
			</el-form-item>
			<el-form-item label="任务名称" prop="taskName">
				<el-input v-model="queryform.taskName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="OnquerySubmit">查询</el-button>
				<el-button @click="resetForm()" size="mini">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button size="mini" type="successs" @click="openaddDialog()">添加</el-button>
		<!-- 表格数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id">
			<el-table-column type="selection" :reserve-selection="true" width="55">
			</el-table-column>
			<el-table-column prop="pname" align="center" label="流程名">
			</el-table-column>
			<el-table-column prop="taskName" align="center" label="任务名">
			</el-table-column>
			<el-table-column prop="taskLeveal" align="center" label="节点">
			</el-table-column>
			<el-table-column prop="dep.departName" align="center" label="执行人部门">
			</el-table-column>
			<el-table-column prop="syspos.posName" align="center" label="岗位">
			</el-table-column>
			<el-table-column label="操作" align="center" width="300PX">
				<template slot-scope="scope">
					<el-button size="mini" type="successs" @click="openeditDialog(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" @click="delDialog(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页数据 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryform.pageNum" :page-sizes="[2,5,8,10]" :page-size="queryform.pageSize"
			layout="->,total, sizes, prev, pager, next, jumper" :total="queryform.total">
		</el-pagination>
		<el-dialog :title="t" :visible.sync="addformVisible" width="30%">
			<el-form :model="addprocessform" ref="addprocessform" size="small">
				<el-form-item label="流程名" label-width="120px" prop="pname">
					<el-input v-model="addprocessform.pname" autocomplete="off" size="mini" style="width: 230px;"></el-input>
				</el-form-item>
				<el-form-item label="任务名" label-width="120px" prop="taskName">
					<el-input v-model="addprocessform.taskName" autocomplete="off" size="mini" style="width: 230px;"></el-input>
				</el-form-item>
				<el-form-item label="节点" label-width="120px" prop="taskLeveal">
					<el-input v-model="addprocessform.taskLeveal" autocomplete="off" size="mini" style="width: 230px;"></el-input>
				</el-form-item>
				<el-form-item label="部门" label-width="120px" prop="taskUserDept">
					<el-cascader v-model="addprocessform.taskUserDept" placeholder="请选择"
						:show-all-levels="false" :options="deptTree" :props="props" size="mini" style="width: 230px;">
					</el-cascader>
				</el-form-item>
				<el-form-item label="岗位" label-width="120px" prop="taskUserPosition">
					<el-cascader v-model="addprocessform.taskUserPosition" placeholder="选择岗位"
						:show-all-levels="false"  :options="posData" :props="posProps"  size="mini" style="width: 230px;">
					</el-cascader>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="addsubmit()" v-show="addprocessform.id==null">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				props: {
					label: 'departName',
					value: 'departId',
					children: 'departList',
				},
				queryform: {
					processName: "",
					taskName: "",
					processStatus: null,
					total: 10,
					pageNum: 1,
					pageSize: 10,
				},
				tableData: [],
				//添加
				addformVisible: false,
					
				addprocessform: {
					id:null,
					pname: "",
					taskName: "",
					taskLeveal: "",
					taskUserDept: "",
					taskUserPosition: "",
				},
				deptTree:[],
				posData:[],
				posProps:{
					label: 'posName',
					value: 'posId',
					children: 'childs',
				},
				t:''
			}
		},
		methods: {
			delDialog(index, row) {
				this.delData(row.id);
				this.getallprocess(); //刷新
			},
			editsubmit() {
				this.editformVisible = false;
				this.$axios.put("/processdef", this.editprocessform)
					.then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '修改成功',
							});
							this.getallprocess(); //刷新
						} else {
							this.$message({
								type: 'error',
								message: '修改失败'
							});
						}
					})
			},
			//修改对话框
			openeditDialog(index, row) {
				this.addformVisible = true;
				this.addprocessform = JSON.parse(JSON.stringify(row));
				this.t="修改";
			},

			OnquerySubmit() {
				this.getallprocess();
			},
			//添加提交
			addsubmit() {
				this.addformVisible = false;
				this.$axios.post("/processdef", this.addprocessform)
					.then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '新增成功'
							});
							this.getallprocess();
						} else {
							this.$message({
								type: 'error',
								message: '新增失败'
							});
						}
					})
			},
			//添加对话框
			openaddDialog() {
				this.addformVisible = true;
				this.t="添加";
			},
			cancel() {
				this.addformVisible = false;
				this.addprocessform = {
					processName: "",
					taskName: "",
					taskNum: "",
					processStatus: "",
					userId: "",
					departId: "",
					posId: ""
				};
			},
			//分页
			handleSizeChange(val) {
				this.queryform.pageSize = val;
				this.getallprocess();
			},
			handleCurrentChange(val) {
				this.queryform.pageNum = val;
				this.getallprocess(); //改变页数之后重新发起请求,刷新页面信息
			},
			//获取表格数据
			getallprocess() {
				this.$axios.get("/processdef/getprocess", {
						params: this.queryform
					})
					.then(resp => {
						this.tableData = resp.data.list;
						this.queryform.total = resp.data.total;
						this.queryform.pageNum = resp.data.pageNum;
						this.queryform.pageSize = resp.data.pageSize;
					})
			},
			//删除
			delData(ids) {
				this.$confirm(`此操作将永久删除编号为${ids}的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/processdef?ids=" + ids).then(resp => {
						if (resp.code == 20000) {
							this.$message.success(`删除编号为${ids}的数据` + resp.msg);
							this.getallprocess();
						} else {
							this.$message.error(`删除编号为${ids}的数据` + resp.msg);
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		mounted() {
			this.getallprocess();
			
			axios.get("/dept/tree").then(resp => {
				debugger;
				this.deptTree = resp.data;
			})
			
			axios.get("/users/AllPos")
				.then(resp => {
					if (resp.code == 20000) {
						this.posData = resp.data;
					}
				});
		}

	}
</script>

<style>
</style>
